<template>
  <div class="pay-course">
    <!-- 视频点播 -->
    <div class="section">
      <div class="item-list" v-for="(item, index) in videoList" :key="index" @click="router({path: 'videoList', query: {id: item.id}})">
        <img :src="item.img">
        <span class="mask"></span>
        <div class="div-tip">
          <span></span>
          <h3>{{item.title}}</h3>
          <p>{{item.sub_title}}</p>
        </div>
        <div class="flex-bottom">
          <p class="bottom-title">{{item.title}}</p>
          <p class="num">
            <span class="video-num">共{{item.all_num}}课</span>
            <span class="person-num">{{item.look_num}}人已点播</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { getVideoLists, baseUrl } from '@/api/api'
export default {
  components: {
  },
  data () {
    return {
      videoList: [], //付费分类点播
    }
  },
  created () {  
    this.get_videoList()
  },
  methods: {
    router (path) {
      this.$router.push(path)
    },
    // 热门推荐付费音频
    get_videoList () {
      getVideoLists().then((res) => {
        this.videoList = res.data.info
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  .pay-course
    background-color #f2f2f2
    min-width 100vw
    min-height 100vh
    .section
      background-color #fff
      .item-list
        padding 0
        padding-bottom 3rem
        position relative
        display block
        img
          height 16rem
        .mask
          position absolute
          background linear-gradient(0deg, rgba(0,1,26,0), rgba(0,1,26,.6))
          width 100%
          height 16rem
          top 0px
          left 0px
        .flex-bottom
          display flex
          padding 1.5rem
          padding-bottom 0
          .bottom-title
            color #333
            line-height 1.8rem
            font-size 1.5rem
            height 1.8rem
            font-weight bold
          .num
            text-align right
            flex 1
            line-height 1.8rem
            height 1.8rem
            font-size 1.2rem
            .video-num
              color #FF659B
              margin 1.5rem
            .person-num
              color #999
        .div-tip
          position absolute
          left 3.7rem
          top 5rem
          color #fff
          z-index 9
          h3
            font-weight bold
            font-size 1.8rem
          p
            width 15rem
            height 3rem
            font-size 1.2rem
            font-weight 500
            line-height 1.8rem
            margin-top .5rem
          span
            position absolute
            width 8rem
            height 1.4rem
            left -.5rem
            background-color #000
            top 1.2rem
            z-index -1
</style>